<template>
<div class="app-container">
    <div class="Information" v-for="(item,i) in form" :key="i">
        <el-row>
            <el-form>
                <el-col :span="7">
                    <el-form-item label="用工部门:">{{ item.deptName }}</el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="岗位名称:"> {{ item.postName }}</el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="用工时长:">{{ item.workHours }}小时</el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-form-item label="岗位薪酬:">{{ item.postComp }}元/小时</el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="申请时间:">{{ item.applyTime }}</el-form-item>
                </el-col>
              
                <el-col :span="7">
                    <el-form-item label="工时:">{{ item.totalHours == null? '未录入': item.totalHours }} </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="薪酬:">{{ item.comp == null? '未录入': item.comp }} </el-form-item>
                </el-col>
            </el-form>
            
        </el-row>
        <div class="titleStatus">
            {{item.status}}
        </div>
       
    </div>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
</div>
</template>

<script>
import {mystuworkstudy} from '@/api/worStudy/workHard'
export default {
    name: 'myWork',
    data() {
        return {
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            form: [],
            total: 0
        }
    },
    methods:{
        getList(data) {
            // this.queryParams = data
            // this.queryParams = { ... data}
            
            console.log(data,'queryParams')
            if(data.page || data.limit) {
                data.pageNum = data.page 
                data.pageSize = data.limit 
            }

            mystuworkstudy(data).then(res => {
                this.form = res.rows
                this.form.forEach(item => {
                    if(item.status == 'W') {
                        item.status = '未结算'
                    }else if(item.status == 'Y') {
                        item.status = '已结算'
                    }else if(item.status == 'Z') {
                        item.status = '审核中'
                    }else if(item.status == 'N') {
                        item.status = '申请失败'
                    }else if(item.status == 'JS') {
                        item.status = '用工结束'
                    }else if(item.status == 'WL') {
                        item.status = '未录入'
                    }else if(item.status == 'T') {
                        item.status = '审核通过'
                    }
                });
                this.total = res.total
                console.log(res, '查询我的勤工助学岗列表')
            })
        },
    }
}
</script>
<style scoped>
.Information {
    background-color: #EFEFEF;
    margin-bottom: 2%;
    padding: 1% 2% 0 2%;
    position: relative;
}
.titleStatus{
    width: 100px;
    height: 100px;
    border: 5px solid #4095E5;
    border-radius: 50%;
    position: absolute;
    top: 0px;
    right: 35px;
    line-height: 100px;
    text-align: center;
    transform:rotate(-30deg);
}
</style>